<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.5/dayjs.min.js"></script>
    <style>
        .time-enter-active,
        .time-leave-active {
            transition: opacity .1s;
        }

        /* 隐藏时的样式 */
        .time-enter,
        .time-leave-to {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="demo">
        <span>{{nowTime | year-format}}</span>
        <transition name="time">
            <span v-show="show" style="color:rgb(255, 0, 0)">{{nowTime | date-format}}</span>
        </transition>
        
    </div>
    <script src="../js/vue.js"></script>
    <script>
        // 自定义过滤器
        Vue.filter("date-format",(value,formstrat="HH:mm:ss")=>{
            // return moment(value).format(formstrat || 'YYYY-MM-DD HH:mm:ss');
            return dayjs(value).format(formstrat);
        })

        Vue.filter("year-format",(value,yearFromat="YYYY-MM-DD")=>{
            return moment(value).format(yearFromat);
        })
        new Vue({
            data(){
                return{
                    nowTime:'',
                    show:true,
                }
            },
            mounted(){
                this.intervalId = setInterval(()=>{
                    console.log('----嘀嘀----');
                    this.nowTime = Date.now();
                    this.show = !this.show;
                },1000)
            },
            beforeDestroy(){
                clearInterval(this.intervalId);
            }
        }).$mount("#demo")
    </script>
</body>
</html>